<template>
  <Scroll :data='data'
          class="list-view"
          ref="scroll"
          @scroll='_scroll'
          :onscroll='true'
          :probe-type='3'>
    <div>
      <div class="list-item"
           v-for="(item, index) in data"
           :key="index"
           ref='group'>
        <p class="title">{{item.title}}</p>
        <div v-for="singer in item.items"
             :key="singer.id"
             class="flex_center singer"
             @click="$emit('select',singer)">
          <img v-lazy="singer.avatar"
               alt=""
               @load.once='refresh'>
          <p>{{singer.name}}</p>
        </div>
      </div>
    </div>
    <div class="label-view"
         @touchstart='labelTouchstart'
         @touchmove.stop.prevent='labelTouchmove'>
      <div v-for="(item,i) in labelData"
           :key="'label'+i"
           :class="['label-item', {active: index == i}]"
           :data-index='i'>
        {{ item }}
      </div>
    </div>
    <div class="topfixed"
         v-show="posY < 0">
      <p class="title"
         ref='topfixed'>{{ fixedTitle }}</p>
    </div>
  </Scroll>
</template>

<script>
// 利用scroll组件 封装歌手列表
import Scroll from 'base/scroll/scroll.vue'
const LABEL_ITEM_HEIGHT = 18
const TITLE_HEIGHT = 30
export default {
  props: {
    data: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      index: 0,
      posY: 1
    }
  },
  methods: {
    // 右侧栏触摸事件
    labelTouchstart (e) {
      var index = e.target.getAttribute('data-index')
      this.start = {
        i: index,
        pageY: e.touches[0].pageY
      }
      this.scrollToElement(index)
    },
    // 右侧栏触摸移动事件
    labelTouchmove (e) {
      var delta = (e.touches[0].pageY - this.start.pageY) / LABEL_ITEM_HEIGHT | 0
      // console.log(delta)
      var index = this.start.i * 1 + delta
      index = Math.min(index, this._groupItemHeight.length - 2)
      if (index < 0) index = 0
      this.scrollToElement(index)
    },
    // 右侧栏标签高亮跳转
    scrollToElement (index) {
      this.index = index
      this.$refs.scroll.scrollToElement(this.$refs.group[index], 0)
    },
    // 初始化右侧栏数据高度组
    initGroup () {
      let val = 0
      this._groupItemHeight = this.$refs.group.map((item) => {
        val += item.clientHeight
        return val
      })
      this._groupItemHeight.unshift(0)
      this._groupItemHeight.reverse()
      // console.log(this._groupItemHeight)
    },
    // 标题栏过渡效果.
    title_move (newval) {
      var i = (this._groupItemHeight.length - 2) - this.index
      var height = this._groupItemHeight[i] - TITLE_HEIGHT
      var height2 = this._groupItemHeight[i - 1]
      var diff = 0
      if (height <= newval && newval <= height2) {
        diff = newval - height
        this.$refs.topfixed.style.transform = `translate3d(0,${-diff}px,0)`
      } else {
        if (diff) return false
        diff = 0
        this.$refs.topfixed.style.transform = `translate3d(0,${-diff}px,0)`
      }
    },
    // scroll滚动事件 {x: 0, y: -890.925}
    _scroll (pos) {
      // console.log(pos)
      this.posY = pos.y
      this.title_move(-this.posY)
      this._groupItemHeight.some((item, i) => {
        if (Math.abs(pos.y) >= item) {
          this.index = (this._groupItemHeight.length - 1) - i
          return true
        }
      })
    },
    refresh () {
      this.$refs.scroll.refresh()
    }
  },
  components: {
    Scroll
  },
  created () {
    this._groupItemHeight = []
  },
  computed: {
    labelData () {
      return this.data.map((item) => {
        return item.title.substring(0, 1)
      })
    },
    fixedTitle () {
      return this.data.length && this.data[this.index].title
    }
  },
  watch: {
    data (to, from) {
      setTimeout(() => {
        this.initGroup()
        this.refresh()
      }, 20)
    }
  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
.list-view
  position relative
  .topfixed
    position fixed
    top 88px
    width 100%
    overflow hidden
  .title
    line-height 30px
    background #363636
    text-indent 12px
    color #ccc
    font-size 14px
  .list-item
    .title
      // margin-top 10px
    .singer
      padding 12px 24px
      img
        width 36px
        height 36px
        margin-right 20px
        border-radius 50%
      p
        color #636363
  .label-view
    position absolute
    right 0
    top 50%
    transform translateY(-50%)
    width 20px
    background $color-background-d
    color $color-text-d
    text-align center
    font-size 14px
    border-bottom-left-radius 5px
    border-top-left-radius 5px
    .label-item
      padding 2px 0
      &.active
        color $color-theme
</style>